<template>
  <div class="box">
    <h3>选择城市:</h3>
    <!-- <select v-model="city_id">
      <option value="0">请选择</option>
      <option v-for="item in hotCity" :key="item.id" :value="item.code">{{ item.name }}</option>
    </select> -->
    <el-select v-model="city_id" placeholder="Select" style="width: 130px">
      <el-option v-if="hotCity.length === 0" label="暂无城市选择" />
      <el-option
        v-else
        v-for="item in hotCity"
        :key="item.id"
        :value="item.code"
        :label="item.name"
      />
    </el-select>

    <el-select v-model="area_id" placeholder="Select" style="width: 130px">
      <el-option v-if="cityArea.length === 0" label="暂无区县选择" />
      <el-option
        v-else
        v-for="item in cityArea"
        :key="item.areaId"
        :value="item.areaId"
        :label="item.name"
      />
    </el-select>
    <!-- <select v-model="area_id">
      <option value="0">请选择</option>
      <option v-for="item in cityArea" :key="item.area_id" :value="item.area_id">
        {{ item.area_name }}
      </option>
    </select> -->
  </div>
  <div id="container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { getHotCityApi, getAreaApi, getShopApi } from '@/apis'

const map = ref(null)
let currentMap = null

const hotCity = ref('0') // 热门城市
const city_id = ref('请选择城市') // 当前选择城市

const cityArea = ref('0') // 当前选择城市区县
const area_id = ref('请选择区县') // 当前选择的区县

// const shops = ref('') // 当前选择的店铺

// 获取城市信息
const getHotCityData = async () => {
  const { data } = await getHotCityApi()
  // const data  = await getHotCityApi()

  console.log('获取的城市:', data)

  hotCity.value = data
}
// watch(area_id, (newVal) => {})

watch(city_id, (newVal) => {
  // 1.表示切换城市
  // 2.判断是否有进行选择
  if (newVal !== '0') {
    getAreaData(newVal) // 获取数据
  }
  area_id.value = '请选择区县' // 恢复区县选择
  cityArea.value = [] // 清空区县数据
  //使用 clearMap 方法删除所有覆盖物
  map.value.clearMap()
})

// 获取城市区县信息
const getAreaData = async (cityCode) => {
  const { data } = await getAreaApi(cityCode)
  // const { result } = await $get('/api/aj/get_area', { citycode })
  console.log('选择的城市区县:', data)

  // const arr = Object.keys(result).map((item) => {
  //   return {
  //     area_id: item,
  //     area_name: result[item]
  //   }
  // })

  cityArea.value = data
}

// 监听是否有选择区县 以及是否发送变化
watch(area_id, (newVal) => {
  if (newVal !== '0') {
    getShopData(city_id.value, area_id.value)
  }
  //使用 clearMap 方法删除所有覆盖物
  map.value.clearMap()
})

// 获取城市+区县的地理坐标点位
const getGeocode = async (city_id, area_id) => {
  // let val =
  //   hotCity.value.find((item) => item.code === city_id).name +
  //   cityArea.value.find((item) => item.area_id === area_id).area_name

  // const { geocodes } = await $get('https://restapi.amap.com/v3/geocode/geo?parameters', {
  //   key: 'd6b408d4634897515abce1dd7669e255',
  //   address: val
  // })
  // console.log('坐标点位:', val, geocodes[0].location.split(','))

  // 获取行政边界
  let name = cityArea.value.find((item) => item.areaId === area_id).name
  getBoundary(name)

  // 设置地图中心点
  // map.value = new currentMap.Map('container', {
  //   viewMode: '3D', //默认使用 2D 模式
  //   zoom: 15, //地图级别
  //   pitch: 9, //设置倾斜角度
  //   center: geocodes[0].location.split(',')
  // })
  // 简洁写法
  // map.value.setZoomAndCenter(12, geocodes[0].location.split(','))
}

// 获取当前区县的店铺信息
const getShopData = async (city_id, area_id) => {
  // 获取城市+区县的地理坐标点位
  getGeocode(city_id, area_id)

  // const { shop_data } = await $get('/api/at/shop', { city_id, area_id })
  const { data } = await getShopApi({ city_id, area_id })
  console.log('当前区县的店铺信息:', data)

  const name = cityArea.value.find((item) => item.areaId === area_id).name
  //创建天气查询实例
  var weather = new currentMap.Weather()

  //执行实时天气信息查询
  weather.getLive(name, function (err, data) {
    console.log(err, data)
    //err 正确时返回 null
    //data 返回实时天气数据，返回数据见下表
  })
  // 遍历店铺 -> 添加点位
  data.forEach((item) => {
    const marker = new currentMap.Marker({
      position: new currentMap.LngLat(item.mapLongitude, item.mapLatitude),
      title: item.shopDesc
    })

    // 标记点弹窗内容显示
    const content = [
      `<div style="display:flex;align-items:center; width: 445px">
        
        <div style="display: flex; flex-direction: column; margin-left: 10px">
          <b style="line-height: 30px;">${item.shopName}</b>
          <b style="line-height: 30px;">电话 : ${item.mobile}</b>
          <b style="line-height: 30px;">地址 : ${item.addr}</b>
          <b style="line-height: 30px;">详情 : ${item.shopDesc}</b>
        </div>
        </div>`
    ]

    marker.on('click', (e) => {
      console.log(e.target.getPosition())

      //创建 infoWindow 实例
      var infoWindow = new currentMap.InfoWindow({
        content: content, //传入字符串拼接的 DOM 元素
        // anchor: 'top',
        offset: new currentMap.Pixel(0, -30)
      })

      //打开信息窗体
      infoWindow.open(map.value, e.target.getPosition())
    })

    map.value.add(marker)
  })
}

// 获取行政区边界
const getBoundary = async (key) => {
  currentMap.plugin('AMap.DistrictSearch', function () {
    var district = new currentMap.DistrictSearch({
      extensions: 'all', //返回行政区边界坐标等具体信息
      level: 'district' //设置查询行政区级别为区
    })
    district.search(key, function (status, result) {
      var bounds = result.districtList[0].boundaries //获取朝阳区的边界信息
      if (bounds) {
        for (var i = 0; i < bounds.length; i++) {
          //生成行政区划 polygon
          new currentMap.Polygon({
            map: map.value, //显示该覆盖物的地图对象
            strokeWeight: 1, //轮廓线宽度
            path: bounds[i], //多边形轮廓线的节点坐标数组
            fillOpacity: 0.7, //多边形填充透明度
            fillColor: '#CCF3FF', //多边形填充颜色
            strokeColor: '#CC66CC' //线条颜色
          })
        }
        map.value.setFitView() //将覆盖物调整到合适视野
      }
    })
  })
}

// 初始化地图方法
const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: 'c2a8441766ff5ca76a18e4d248a66231'
  }
  AMapLoader.load({
    key: '1cae6713580be94f62b073e18bd2cdbc', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.DistrictSearch', 'AMap.Weather'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      // 复制对象 -> 外面使用
      currentMap = AMap
      map.value = new AMap.Map('container', {
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
        mapStyle: 'amap://styles/grey' //设置地图的显示样式
      })

      var clickHandler = function (e) {
        console.log(e)

        alert('您在[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]的位置点击了地图！')
      }

      //绑定事件
      map.value.on('click', clickHandler)

      // 导入工具条
      AMap.plugin('AMap.ToolBar', () => {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.value.addControl(new AMap.ToolBar())
      })
      // 导入比例尺
      AMap.plugin('AMap.Scale', () => {
        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.value.addControl(new AMap.Scale())
      })
    })
    .catch((e) => {
      console.log(e)
    })
}

onMounted(() => {
  initMap()
  getHotCityData()
})

onUnmounted(() => {
  map.value?.destroy()
})
</script>

<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>
